Bara reprezentare procent - PHP + CSS
Pentru realizarea unei astfel de bari se folosesc doua imagini (.png), putin, dar foarte important, cod CSS, HTML si PHP. Pentru ca scriptul sa fie util cu ceva trebuie sa folositi date dintr-o baza de date sql dar nu voi exemplifica si asta.
Voi incepe cu prezentarea codului fara PHP si apoi vom arata apoi cum se poate face si dinamic (implementare PHP).
___________________________
Avem nevoie de doua fisiere: index.html si stil.css.
Index.html
| <html> <head> <title>Procente</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <img src="percentImage.png" alt="50%" class="percentImage" style="background-position: -150px 0pt;" /> <-- Pozitia imaginii de background este foarte importanta. Daca in loc de -150 ar fi trecut 0 bara ar fi umpluta ca pentru 100% --> </body> </html> |
Stil.css
| img.percentImage { background: url(percentImage_back.png) top left no-repeat; padding: 0; margin: 5px 0 0 0; background-position: 1px 0; } |
Prima imagine: 300x18
A doua imagine: 600x18
Pentru a face ca bara de procente sa afiseze in functie de date dinamice (prelucrate in prealabil in PHP - fie introduse de la tastatura sau extrase dintr-o baza de date) voi da si urmatoarele indicatii.
Index.html va deveni Index.php . Vom controla pozitia imaginii de background in functie de datele de intrare. Pentru reprezentarea unui procent de 0% pozitia este -300 , iar pentru 100% este 0 . Pentru o mai buna intelegere voi baga imaginea intr-un tabel si voi afisa si procentul in dreapta.
Presupunem ca avem doua numere si dorim sa aflam procentul pe care-l are unul dintre ele din total. Daca am incerca sa reprezentam un punctaj ne-a interesa punctajul maxim si punctajul pe care-l reprezentam.
| <html> <head> <title>Reprezentare Procente</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <?php $nr1=45; //trecem nr in variabila . Am putea sa-l trecem dintr-o bdd $nr2=55; //trecem si alt nr in variabila. Pentru exemplificare $total=$nr1+$nr2; // facem totalul celor 2 nr $proc=($nr1/$total)*100; // aflam procentul primului nr din total $p = number_format($proc,1,",","."); // formatam procentul - 1 singura zecimala $x=-300+$proc*3; // Aflam pozitia imaginii de background in functie de procent ?> <table border=0> <tr> <td> <img src="percentImage.png" alt="<?php echo $p; ?>" class="percentImage" style="background-position: <?php echo $x; ?>px 0pt;" /> </td> <td width="100" align="right" valign="middle"> <?php echo $p."%"; ?> </td> </tr> </table> </body> </html> |
EXEMPLU activ
Articole asemanatoare
» Elemente de pagina (partea 3)
» Elemente de pagina (partea 2)
» Elemente de pagina (partea 1)
» Pagina web simpla in Photoshop
Comentarii
johnny
interesant exemplul dar cum fac sa folosesc mai multe bare de procent? Unde trebuie sa modific? In PHP sau in HTML?
interesant exemplul dar cum fac sa folosesc mai multe bare de procent? Unde trebuie sa modific? In PHP sau in HTML?
12-Mar-2010 - 12:34
Voteaza acest articol!
Trimite un comentariu!
